<template>
  <Header></Header>
  <Drawer></Drawer>
  <el-breadcrumb separator="/" style="font-size: 20px; color: #2ab28b">
    <el-breadcrumb-item :to="{ path: '/Home' }">首页</el-breadcrumb-item>
    <el-breadcrumb-item :to="{ path: '/Home' }">{{
      labName
    }}</el-breadcrumb-item>
    <el-breadcrumb-item :to="{ path: '/AdultList/' + ids }"
      >档案管理</el-breadcrumb-item
    >
    <el-breadcrumb-item>报告列表</el-breadcrumb-item>
  </el-breadcrumb>

  <div class="pageListBotton">
    <el-button
      :icon="CirclePlus"
      color="#2196f3"
      style="color: white"
      round
      @click="onPageAdd"
    >
      新建档案
    </el-button>
    <span class="onBtnRight" @click="onHome"
      ><img src="../assets/img/pageList_qiehuan.png" alt="" /> 更换群体</span
    >
  </div>

  <div class="pageListBotton">
    <el-form :inline="true" :model="formInline" class="demo-form-inline">
      <el-form-item>
        <el-input v-model="name" placeholder="请输入姓名"></el-input>
      </el-form-item>
      <!-- <el-form-item>
        <el-input v-model="phone" placeholder="请输入手机号"></el-input>
      </el-form-item>
      <el-form-item label="怀孕时间">
        <el-config-provider :locale="zhCn">
          <el-date-picker
            v-model="Pregnancy_time"
            type="date"
            format="YYYY-MM-DD"
            value-format="YYYY-MM-DD"
            placeholder="选择日期"
            :style="{ width: '100%' }"
          >
          </el-date-picker>
        </el-config-provider>
      </el-form-item>
      <el-form-item>
        <el-config-provider :locale="zhCn">
          <div class="page_provider_title">测评时间</div>
          <el-date-picker
            v-model="establish"
            type="daterange"
            align="right"
            unlink-panels
            range-separator="至"
            start-placeholder="开始日期"
            end-placeholder="结束日期"
            :style="{ float: 'left' }"
          ></el-date-picker>
        </el-config-provider>
      </el-form-item>

      <el-form-item>
        <el-input v-model="yisheng" placeholder="请输入测评医生"></el-input>
      </el-form-item> -->

      <el-form-item>
        <el-button
          color="#2196f3"
          style="color: white"
          round
          @click="onDefault(0, 0, 1)"
          >搜索</el-button
        >
        <el-button Plain @click="onDefault(1, 0, 1)">重置</el-button>
      </el-form-item>
    </el-form>
  </div>

  <el-table
    :data="tableData"
    style="width: 85%; margin-left: 5%"
    v-infinite-scroll="load"
    infinite-scroll-disabled="loading"
  >
    <div class="loading" v-if="loading">
      <span id="load-text">{{ loadText }}</span>
    </div>
    <el-table-column prop="id" label="序号" />
    <el-table-column label="姓名" prop="name" />
    <el-table-column label="性别">
      <template #default="scope">
        {{ scope.row.sex == 1 ? "女" : "男" }}
      </template>
    </el-table-column>
    <el-table-column
      prop="save_member"
      label="测评医生"
      width="200"
    ></el-table-column>
    <el-table-column
      fixed="right"
      prop="createtime"
      width="220"
      label="测评时间"
    ></el-table-column>
    <el-table-column fixed="right" width="220" label="操作">
      <template #default="scope">
        <span
          :style="{
            border: 'none',
            'margin-right': '16px',
            color: '#409EFF',
            cursor: 'pointer',
          }"
          @click="onReport(scope.$index, scope.row)"
          >查看报告</span
        >
        <span
          :style="{
            border: 'none',
            'margin-right': '16px',
            color: '#409EFF',
            cursor: 'pointer',
          }"
          @click="cp_shanchu(scope.$index, scope.row)"
          >删除</span
        >
      </template>
    </el-table-column>
  </el-table>
</template>

<script setup>
import { useRoute, useRouter } from "vue-router";
const route = useRoute();
const router = useRouter();

import { ElMessage } from "element-plus";
import {
  defineComponent,
  onMounted,
  ref,
  watch,
  getCurrentInstance,
} from "vue";
import * as api from "../api/loginHttp";

import Header from "./common/Header.vue";
import Drawer from "./common/Drawer.vue";

import http, { baseUrl } from "../utils/http";

import zhCn from "element-plus/lib/locale/lang/zh-cn";

const { ctx } = getCurrentInstance();
const ids = ref();
const labName = ref();
const loadText = ref("正在加载...");
const tableData = ref([]);
const loading = ref(false);
const pages = ref(0);
const limit = ref(20);
const name = ref("");
const phone = ref("");
const sex = ref("");
const yisheng = ref("");
const birth = ref([]);
const establish = ref([]);
const totalPages = ref();

const options = [
  {
    value: "男",
    label: "男",
  },
  {
    value: "女",
    label: "女",
  },
];

function $getTimes(params) {
  var date = new Date(params);
  var y = date.getFullYear();
  var m = date.getMonth() + 1;
  m = m < 10 ? "0" + m : m;
  var d = date.getDate();
  d = d < 10 ? "0" + d : d;
  const time = y + "-" + m + "-" + d;
  return time;
}

const onDefault = async (isReset, addTo = 0, Botton = 0) => {
  if (isReset == 1) {
    name.value = "";
    sex.value = "";
    birth.value = "";
    establish.value = "";
  }

  if (Botton == 1) {
    pages.value = 0;
  }

  let params = {
    group_id: ids.value,
    pages: pages.value,
    limit: limit.value,
  };

  params.pages = pages.value;

  if (name.value != "") {
    params.name = name.value;
  }
  // if (sex.value != "") {
  //   params.sex = sex.value == "女" ? 1 : 0;
  // }
  // if (birth.value[0] != undefined) {
  //   params.birth_start = $getTimes(birth.value[0]);
  // }
  // if (birth.value[1] != undefined) {
  //   params.birth_end = $getTimes(birth.value[1]);
  // }
  // if (establish.value[0] != undefined) {
  //   params.start_time = $getTimes(establish.value[0]);
  // }
  // if (establish.value[1] != undefined) {
  //   params.end_time = $getTimes(establish.value[1]);
  // }
  const data = await api.AdultList(params);
  console.log(data, "芜湖");
  let len = data.data.data.contents.length;

  if (data && len == 0 && !len) {
    loadText.value = "没有找到相关数据";
  } else if (data && len < 20) {
    loadText.value = "暂无更多数据";
  } else {
    loading.value = false;
  }

  if (addTo == 1) {
    tableData.value = tableData.value.concat(data.data.data.contents); //因为每次后端返回的都是数组，所以这边把数组拼接到一起
  } else {
    tableData.value = data.data.data.contents;
  }
  totalPages.value = data.data.data.totalPages;
  // let data = await this.$getEvaluationList(params)
};

const load = async () => {
  //滑到底部时进行加载
  loading.value = true;
  pages.value = pages.value + 20; //页数+10
  await onDefault(0, 1); //调用接口，此时页数+1，查询下一页数据
};

const onReport = async (index, row) => {
  await router.push({
    path: "/Adult_report/" + ids.value + "/" + row.user_id + "/" + row.id,
  });
};

const onHome = async () => {
  await router.push({ path: "/Home/" });
};
const onPageAdd = async () => {
  await router.push({ path: "/AdultAdd/" + ids.value });
};

const cp_shanchu = async (index, row) => {
  console.log(row)
  let params = {
    id: row.id,
  };
  const data = await api.AdultaDel(params);
  console.log(data.data.code);
  if (data.data.code == 1) {
    ElMessage.success(data.data.msg)
      setTimeout(() => {
          location. reload()
    }, 2000)

  }else{
      ElMessage.error(res.data.msg)
      return false
  }
};

const fetchData = async () => {
  if (route.params.groupId) {
    ids.value = route.params.groupId;
    if (ids.value == 3) {
      labName.value = "婴幼儿营养测评";
    } else if (ids.value == 5) {
      labName.value = "孕产妇营养测评";
    } else if (ids.value == 6) {
      labName.value = "成年人营养测评";
    } else if (ids.value == 7) {
      labName.value = "慢性病营养测评";
    } else if (ids.value == 8) {
      labName.value = "团体营养测评";
    }
    // http.get('api/archives/index?group_id='+ ids.value).then((res)=>{
    //   if(res.data.code === 1) {
    //     console.log(res)
    //   } else {
    //     ElMessage.error(res.data.msg)
    //     router.push({'path': '/pageList/' + groupId.value})
    //   }
    // })
  }
};

onMounted(() => {
  fetchData();
  onDefault();
});
</script>

<style scoped>
</style>
